<template>
  <el-config-provider :locale="locale">
    <div class="common-layout" v-if="check_login">
      <el-container>
          <el-header height="30px">
              <router-link to="main" ><div style="color:#fff;font-size:25px"><el-icon class="log_img" />无人机健康管理系统</div></router-link>
              <div style="float:right;position:fixed;right:5px;top:5px;">
                <el-button><el-icon class="btn_help"/>帮助手册</el-button>
                <el-button @click="lang_switch"><el-icon class="btn_lang"/>切换至英文模式</el-button>
                <el-button><el-icon class="btn_user"/>于爽</el-button>
              </div>
          </el-header>
          <el-main>
              <el-scrollbar>
                <router-view @onlogin="login"></router-view>
              </el-scrollbar>
          </el-main>
          <el-footer height="30px">
              <div style="display:flex;justify-content:center">
                  <el-button link>实时数据：开启</el-button>
                  <el-button link>服务器：未连接</el-button>
                  <el-button link>{{cur_date}}</el-button>
              </div>
          </el-footer>
      </el-container>
    </div>
    <div v-else>
      <router-view @onlogin="login"></router-view>
    </div>
  </el-config-provider>
</template>

<script>
import {ref} from "vue"
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
export default {
  name: 'App',
  setup(){
    return {
        language : ref('zh-cn'),
        cur_date:ref(''),
      }
  },
  created(){
    this.refresh_time();
    setInterval(this.refresh_time,1000*60)
  },
  computed:{
    check_login(){
      return sessionStorage.getItem('is_login')||this.is_login
    },
    locale(){
      return this.language === 'zh-cn' ? zhCn : en
    }
  },
  data(){
    return {
      is_login:false
    }
  }, 
  methods:{
    lang_switch(){
      this.language = this.language === 'zh-cn' ? 'en' : 'zh-cn'
    },
    refresh_time(){
      let date = new Date();
      this.cur_date = date.getFullYear()+'-'+(date.getUTCMonth()+1)+'-'+date.getDate()
            + ' 星期'+ date.getDay()
            +' '+date.getHours()+':'+date.getMinutes()
    },
    login(event){
      sessionStorage.setItem('is_login',event)
      this.is_login = event
    },
    back(){
      this.$router.back();
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
  background-image:url('assets/bg.jpg')
}
.el-header{
  position: fixed;
  z-index: 3;
  --el-header-padding:5px;
}
.el-tabs{
    height: 100%;
}
.el-tabs__content{
     height: 100%;/*calc(100% - 60px); */
}
.el-tab-pane{
    height: 100%;
}
.el-card{
    --el-card-padding:5px;
}
.box-card{
    margin:0 5px;
    text-align: left;
}
.el-main{
  position: fixed;
  height:100%;
  width:100%;
  padding:50px 5px;
  top:0;
  left:0;
}
.el-footer{
  position: fixed;
  margin: auto;
  bottom: 5px;
  left: 0;
  right: 0;
}
.el-scrollbar__view{
  height: 100%;
}
.btn_help{
  background: url("assets/icon-bzsc.png");
  background-size: cover;
  margin:2px;
}
.log_img{
  background: url("assets/logo.png");
  background-size: cover;
  margin:2px;
}
.btn_lang{
  background: url("assets/icon-zyw.png");
  background-size: cover;
  margin:2px;
}
.btn_user{
  background: url("assets/icon-yh.png");
  background-size: cover;
  margin:2px;
}
a {
  text-decoration: none;
  margin: 0 5px;
  display: flex;
}
.router-link-active {
  text-decoration: none;
}
</style>
